<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn @itemClick="cpnClick()"></cpn>

  </div>

      <template id="cpn">
        <div>
          <button v-for="item in categories" @Click="btnClick(item)">{{item.name}}</button>
        </div>
      </template>
      
      <script src="vue.js"></script>
      <script>
        Vue.component("cpn", {
          template: "#cpn",
          //数据对象
          data() {
            return {
              categories: [
                {id: "a",name: "测试类别1"},
                {id: "b",name: "测试类别2"},
                {id: "c",name: "测试类别3"},
                {id: "d",name: "测试类别4"},
              ]
            }
          },
          //methods用于定义方法
          methods: {
            btnClick(item){
              //发射事件：自定义事件
              this.$emit("itemclick", item)
            }
          },
        })
        app = new Vue({
          //声明要绑定的id
          el: '#app',
          //数据对象 
          data: {
            message: "测试文本",
            movie: ["测试数据1", "测试数据2", "测试数据3", "测试数据4",]
          },
          //methods用于定义方法
          methods: {
            cpnClick(item){
              console.log("item",item)
            }
            
          }
        })
      </script>
</body>
</html>